/**
 * @Description: 标题栏组件
 * @author tao.xie
 * @date 2019-07-23 15:24
*/
<template>
  <title-bar
    :needBack="false"
    :needBorder="false"
  >
      <!--左边的未读消息数量-->
      <i class="icon fontsize44 iconfont icon-notice" slot="left" @click="pushToNoticePage">
        <span v-if="message > 0"></span>
      </i>
      <!--线路搜索的入口-->
      <i class="search_icon fontsize34 iconfont icon-search" @click="pushToLineSearch"/>
      <!--实时天气组件-->
      <weather-live slot="right" class="weather flex1" ref="weather"/>
  </title-bar>
</template>
<script>
import { TitleBar } from 'vue-xb-ui-depot'
import WeatherLive from './weather/WeatherLive'
import {AppRouterUtils} from 'vue-xiaobu-utils'
import {getMessage} from '../api/api'
export default {
  components: {
    'title-bar': TitleBar,
    WeatherLive
  },
  data() {
    return {
      message: 0
    }
  },
  mounted() {
    this.addEvent()
    this.getMessage()
    // 监听下拉刷新
    this.$EventBus.$on('onRefresh', () => {
      this.getMessage()
    })
  },
  methods: {
    // 获取消息数量
    getMessage() {
      getMessage().then(res => {
        this.message = res
      })
    },
    pushToLineSearch() {
      AppRouterUtils.open('/bus-app/SearchCar.html?_tv=false')
    },
    pushToNoticePage() {
      AppRouterUtils.detectionGoToPage('/city-app/notice.html?_tv=true&_rv=true')
    },

    // 添加监听
    addEvent() {
      document.addEventListener(
        'resume',
        () => {
          // 登录状态更改时收到resume事件，自动刷新
          this.getMessage()
          this.$refs.weather._getWeatherLive()
        },
        false
      )
    }
  }
}
</script>
<style>
  .icon-notice {
    margin: 0 32px;
    color: #000;
    width:48px;
    height:48px;
    position: relative;
  }
  .icon-notice>span:first-of-type{
    position: absolute;
    right: 12px;
    top: 24px;
    width: 12px;
    height: 12px;
    background-color: red;
    border-radius: 50%;
  }
  .search_icon {
    width:422px;
    height:72px;
    line-height:64px;
    padding-left:32px;
    color:#999999;
    background:#F2F5F6;
    border-radius:4px;
    opacity:0.6;
    margin-top:12px;
  }
  .search_icon::after{
    content: '搜索站点、线路、位置';
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px; /* no */
    color:#999999;
    margin-left:16px;
  }
  .weather{
    margin-left:32px;
  }

</style>
